<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>组件基础</title>
        <style>
            v-cloak { display: none; }
            .wrapper { border: 1px solid blue ; }
            .counter { border: 1px solid gray; margin: 10px; user-select: none; }
        </style>
    </head>
    <div>

        <div id="first" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>

            // 第一步: 定义组件
            const Counter = {
                template: `<div @click="increase" class="counter">
                                {{count}}
                           </div>`,
                data() {
                    return {
                        count: 1
                    }
                },
                methods: {
                    increase(){
                        this.count++;
                    }
                },
                created() {
                    console.log('组件初始化完毕', this.count );
                    console.log('父组件:', this.$parent );
                    console.log('根组件:', this.$root );
                },
                updated() {
                    console.log( `${this.$attrs.id} count: `, this.count );
                }
            }

            const root = {
                // 第二步: 注册组件
                // 在某个组件内部注册的子组件仅限当前组件内使用，属于`局部注册`
                components: {
                    'kaifamiao-counter': Counter
                },
                template: `<div class="wrapper">
                              <h3>{{title}}</h3>
                              <!--第三步: 使用组件-->
                              <kaifamiao-counter id="first"></kaifamiao-counter>
                              <kaifamiao-counter id="second"></kaifamiao-counter>
                              <kaifamiao-counter id="third"></kaifamiao-counter>
                           </div>`,
                data() {
                    return {
                        title: '测试组件'
                    }
                }
            }

            const app = Vue.createApp(root);
            // 第二步: 注册组件
            // 通过 应用 注册的组件可以在整个应用内部使用，属于`全局注册`
            // app.component( 'kaifamiao-counter', Counter );
            app.mount( '#first' );
        </script>
    </div>
</html>